<template>
    <div class="fire-drill-info-view">
        <el-row class="info-title">
            <el-col>
                <h3>{{ oldInfo.title }}</h3>
                <p><span class="info-create-user">{{ oldInfo.createAccountName }}</span>|<span class="info-create-time">{{ oldInfo.createTime }}</span></p>
            </el-col>
        </el-row>
        <el-row class="info-item">
            <el-col :span="2">
                <label class="info-label">参演单位：</label>
            </el-col>
            <el-col :span="22">
                <p class="info-value">{{ oldInfo.orgNames }}</p>
            </el-col>
        </el-row>
        <el-row class="info-item">
            <el-col :span="2">
                <label class="info-label">演习时间：</label>
            </el-col>
            <el-col :span="22">
                <p class="info-value">{{ oldInfo.startTime + '至' + oldInfo.endTime }}</p>
            </el-col>
        </el-row>
        <el-row class="info-item">
            <el-col :span="2">
                <label class="info-label">演习预案：</label>
            </el-col>
            <el-col :span="22">
                <p class="info-value"><el-link type="primary" @click="rowShowPlan(oldInfo.planId)">{{ oldInfo.planName }}</el-link></p>
            </el-col>
        </el-row>
        <el-row class="info-item editor-content ql-container ql-snow">
            <div class="ql-editor" v-html="oldInfo.content"></div>
        </el-row>
        <el-row class="info-item">
            <el-col :span="2">
                <label class="info-label">封面：</label>
            </el-col>
            <el-col :span="22">
                <img v-if="oldInfo.coverPic" 
                    :src="oldInfo.coverPic"  
                    width="150"
                    height="150" 
                    @click="$imgPreview" 
                    :data-imgpreview="oldInfo.coverPic"/>
                <p v-else>暂无封面</p>
            </el-col>
        </el-row>
        <el-dialog
            :close-on-click-modal="false"
            title="预案详情"
            width="600px"
            top='5vh'
            append-to-body
            :visible.sync="planFormDialogHandle"
            @close="planFormDialogHandle = false"
            v-dialogDrag>
            <plan-detail :planForm="planForm"></plan-detail>
        </el-dialog>
    </div>
</template>
<script>
import { selectEmergencyPlanDetail} from '@/api/plan'
import PlanDetail from '../../Police/Dialog/PlanDetailForm'

export default {
    name: 'FireDrillInfoView',
    props: {
        closeFun: {
            required: true,
            type: Function
        },
        oldInfo: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    components: { 
        PlanDetail,
    },
    data() {
        return {
            planForm: {},
            planFormDialogHandle: false
        }
    },
    created() {},
    methods: {
        rowShowPlan(planId){
            this.planForm = {}
            selectEmergencyPlanDetail({
                planId : planId,
            }).then((result)=>{
                if(result.data) {
                    this.planForm = result.data
                }
                this.planFormDialogHandle = true
            })
        },
    }
}
</script>
<style lang="scss">
.fire-drill-info-view {
    .info-title {
        margin-bottom: 20px;
        padding-left: 10px;
        line-height: 40px;
        h3 {
            font-size: 24px;
        }
        .info-create-user {
            margin-right: 10px;
        }
        .info-create-time {
            margin-left: 10px;
        }
    }
    .info-item {
        padding: 10px;
        .info-label {
            font-weight: bold;
        }
    }
    .editor-content {
        margin: 10px 0;
        padding: 20px 10px;
        border-top: 1px solid #DCDFE6;
        border-bottom: 1px solid #DCDFE6;
        img {
            max-width: 100%;
        }
        iframe {
            position: relative;
            width: 100%;
            min-height: 300px;
        }
    }
}
</style>